<template>
  <div class="xtx-pay-page">
    <div class="container">
      <!-- 付款信息 -->
      <div class="pay-info">
        <span class="icon iconfont icon-queren2"></span>
        <div class="tip">
          <p>订单提交成功！请尽快完成支付。</p>
          <p>
            请在<span>{{ payInfo.countdown }}</span>分钟内支付订单, 超时后将取消订单
          </p>
        </div>
      </div>
      <!-- 明细 -->
      <div class="amount-title">
        <p class="head">金额明细</p>
        <dl>
          <dt>应付金额：</dt>
          <dd>¥{{ payInfo.payMoney?.toFixed(2) }}</dd>
        </dl>
        <dl v-if="payInfo.payChannel === '余额支付'">
          <dt>账户金额：</dt>
          <dd>¥{{ payInfo.balance?.toFixed(2) }}</dd>
        </dl>
        <dl v-if="payInfo.payChannel === '余额支付'">
          <dt>结余：</dt>
          <dd>¥{{ (payInfo.balance - payInfo.payMoney)?.toFixed(2) }}</dd>
        </dl>
      </div>
      <div class="submit">
        <el-button type="primary" @click="payOrder" size="large">支付</el-button>
        <el-button size="large">取消</el-button>
      </div>
    </div>
  </div>

  <PayDrawer ref="drawer" />
</template>

<script setup>
import { useRoute } from 'vue-router';
import { onMounted, ref } from "vue";
import { getOrderAPI } from "@/apis/pay";
import PayDrawer from "./components/PayDrawer.vue";

// 获取订单数据
const route = useRoute();
const payInfo = ref({});
const drawer = ref();

const getPayInfo = async () => {
  const res = await getOrderAPI(route.query.id);
  payInfo.value = res.data;
};

const payOrder = () => {
  drawer.value.pay(payInfo.value.id, payInfo.value.payChannel);
};

onMounted(() => getPayInfo());
</script>

<style scoped>
.xtx-pay-page {
  margin-top: 20px;
}

.pay-info {
  background: #fff;
  display: flex;
  align-items: center;
  height: 240px;
  padding: 0 80px;
}

.icon {
  font-size: 80px;
  color: #1dc779;
}

.tip {
  padding-left: 10px;
  flex: 1;
}

.tip p:first-child {
  font-size: 20px;
  margin-bottom: 5px;
}

.tip p:last-child {
  color: #999;
  font-size: 16px;
}

.amount-title {
  margin-top: 20px;
  background-color: #fff;
  padding-bottom: 60px;
}

.amount-title p {
  line-height: 70px;
  height: 70px;
  padding-left: 30px;
  font-size: 16px;
}

.amount-title p.head {
  border-bottom: 1px solid #f5f5f5;
}

.amount-title dl {
  display: flex;
  justify-content: flex-end;
  line-height: 50px;
  font-size: 16px;
}

.amount-title dd {
  width: 240px;
  text-align: right;
  padding-right: 70px;
}

.amount-title dd.price {
  font-size: 20px;
  color: #f56c6c;
}

.submit {
  text-align: right;
  padding: 10px;
  border-top: 1px solid #f5f5f5;
}

.qr-code {
  text-align: center;
}

.qr-code img {
  width: 200px;
  height: 200px;
}

.qr-code p {
  margin-top: 10px;
  font-size: 16px;
  color: #666;
}
</style>